<template>
  <el-form :data="form">
    <div class="searchBox">
      <el-card class="box-card">
        <div class="top">
          <div class="top_left">
            <el-icon><Search /></el-icon>
            <span class="search_txt">筛选搜索 </span>
          </div>
          <div class="top_right">
            <el-button type="default" @click="Reset">重置</el-button>
            <el-button type="primary" @click="searchParamsFn"
              >查询搜索</el-button
            >
          </div>
        </div>
        <div class="under">
          <span>专题名称: </span>
          <el-input v-model="form.subjectName" placeholder="专题名称" />
          <span>推荐状态: </span>
          <el-select
            v-model="form.recommendStatus"
            class="m-1"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-card>
    </div>
  </el-form>

  <div class="add">
    <el-card>
      <div>
        <el-icon><Tickets /></el-icon>数据列表
      </div>
      <el-button @click="add" size="small">选择专题</el-button>
    </el-card>
  </div>

  <el-table
    @selection-change="handleSelectionChange"
    :data="list"
    cell-class-name="align-c"
    header-row-class-name="align-c"
    border
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="subjectName" label="专题名称" />
    <el-table-column prop="recommendStatus" label="是否推荐">
      <template #default="{ row }">
        <el-switch
          v-model="row.recommendStatus"
          :active-value="1"
          :inactive-value="0"
          @click="updateStatusFn(row.id, row.recommendStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="recommendStatus" label="状态">
      <template #default="{ row }">
        <span>{{ row.recommendStatus === 1 ? "推荐中" : "未推荐" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button text type="primary" @click="SetSort(row.id, row.sort)"
          >设置排序</el-button
        >
        <el-button text type="primary" @click="handleDelete(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="footer">
    <div>
      <el-select v-model="BatchV" class="m-2" clearable placeholder="批量操作">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="BatchOperation">确定</el-button>
    </div>

    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[5, 10, 15]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>

  <EditSort :show="show" @hide="isHide" :sort="sort" />
  <SelectProduct
    :query="querySubjectListApi"
    :create="recommendSubjectCreateApi"
    :show="isHideSelect"
    @hide="isHideSelectFn"
  >
    <template v-slot:content>
      <el-table-column prop="title" label="专题名称" />
      <el-table-column prop="categoryName" label="所属分类"> </el-table-column>
      <el-table-column prop="createTime" label="添加时间">
        <template #default="{ row }">
          <span>{{ dateFormat(row.createTime) }}</span>
        </template>
      </el-table-column>
    </template>
  </SelectProduct>
</template>
<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import EditSort from "./editSort.vue";
import SelectProduct from "./selectProduct.vue";
import useTable from "@/hooks/useTable";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { Search, Tickets } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import {
  homeRecommendSubjectListApi,
  homeRecommendSubjectDeleteApi,
  recommendSubjectUpdateStatusApi,
  subjectUpdateSortApi,
  recommendSubjectCreateApi,
  querySubjectListApi,
} from "./api/index";
import { dateFormat } from "@/utils/index";

const isHideSelect = ref<boolean>(false);
const isHideSelectFn = (val: boolean) => {
  isHideSelect.value = false;
  if (val) searchParamsFn();
};
const add = () => {
  isHideSelect.value = true;
};

const BatchV = ref("");
const options = [
  {
    value: "op1",
    label: "设为推荐",
  },
  {
    value: "op2",
    label: "取消推荐",
  },
  {
    value: "op3",
    label: "删除",
  },
];
// 批量操作
const BatchOperation = () => {
  if (BatchV.value == "op3") {
    handleBatchDelete();
  } else if (BatchV.value == "op2") {
    batchUpdateStatusFn(0);
  } else if (BatchV.value == "op1") {
    batchUpdateStatusFn(1);
  }
};

const show = ref<boolean>(false);
const sort = reactive<{ id: number; sort: number }>({
  id: 0,
  sort: 0,
});
const SetSort = (ids: number, sorts: number) => {
  show.value = true;
  sort.id = ids;
  sort.sort = sorts;
};
const isHide = (val: boolean, sortVal: number) => {
  show.value = val;
  if (val) {
    subjectUpdateSortApi(sort.id, sortVal).then((res) => {
      if (res.code === 200) {
        show.value = false;
        searchParamsFn();
      }
    });
  }
};

// 选中的数组
const ids = ref<number[]>([]);
const handleSelectionChange = (selection: any) => {
  ids.value = [];
  selection.forEach((item: any) => {
    ids.value.push(item.id);
  });
};

// 修改状态
const updateStatusFn = (id: number, recommendStatus: number) => {
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const ids = [];
      ids[0] = id;
      recommendSubjectUpdateStatusApi(ids, recommendStatus).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          // 更新页面
          pageChangeHandle();
        } else {
          ElMessage.success("已取消操作");
          pageChangeHandle();
        }
      });
    })
    .catch(() => {
      ElMessage.success("已取消操作");
      pageChangeHandle();
    });
};

//批量修改状态
const batchUpdateStatusFn = (recommendStatus: number) => {
  if (ids.value.length === 0) {
    ElMessage.warning("请选择一条记录");
    return;
  }
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    recommendSubjectUpdateStatusApi(ids.value, recommendStatus)
      .then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          // 刷新页面
          pageChangeHandle();
        }
      })
      .catch(() => {
        ElMessage.success("取消修改");
      });
  });
};

const option = [
  {
    value: "0",
    label: "未推荐",
  },
  {
    value: "1",
    label: "推荐中",
  },
];

const form = reactive({
  pageSize: 5,
  subjectName: "",
  recommendStatus: "",
});
const {
  list,
  pageNum,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  pageSize,
  searchParamsFn,
} = useTable(homeRecommendSubjectListApi, form);

// 单个删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm("是否要删除该推荐?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const ids = [];
      ids[0] = id;
      homeRecommendSubjectDeleteApi(ids).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          // 刷新页面
          pageChangeHandle();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage.success("取消删除");
    });
};

// 批量删除
const handleBatchDelete = () => {
  if (ids.value.length === 0) {
    ElMessage.warning("请选择一条记录");
    return;
  }
  ElMessageBox.confirm("是否要删除该推荐?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      homeRecommendSubjectDeleteApi(ids.value).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          // 刷新页面
          pageChangeHandle();
        } else {
          ElMessage.success("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage.success("取消删除");
    });
};

// 重置
const Reset = () => {
  // 初始化
  form.subjectName = "";
  form.recommendStatus = "";
  pageSize.value = 5;
  pageNum.value = 1;
  searchParamsFn();
};
</script>

<style lang="less" scoped>
.searchBox {
  :deep(.el-card) {
    padding: 20px;
  }
  .top {
    position: relative;
    display: flex;
    .top_left {
      .search_txt {
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .top_right {
      position: absolute;
      right: 20px;
    }
  }
  .under {
    padding: 20px 40px 0;
    font-size: 14px;
    :deep(.el-input) {
      height: 32px;
      line-height: 32px;
      width: 210px;
      padding-right: 20px;
    }
  }
}

.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
    // font-size: 12px;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
</style>
